<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>嗖方宁</title>

	<!-- CSS includes -->
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet"> 
	<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/theme.css" rel="stylesheet">

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<h2>Hiao Zun</h2>
		</div>
		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#home" class="smooth-scroll">自我介绍</a></li>
				<li><a href="#skills" class="smooth-scroll">专业技能</a></li>
				<li><a href="#gallery" class="smooth-scroll">作品展示</a></li>
				<li><a href="#contact" class="smooth-scroll">联系我</a></li>
			</ul>
		</div><!-- /.navbar-collapse -->
	</div><!-- /.container-fluid -->
</nav>

<div class="container-top">
	<div class="container">
		<div class="page-header" id="home">
        </div>
		<div class="row">
			<div class="col-md-6" style="background-color: #1E1F23; opacity: 0.8; padding: 20px;">
				<br>
				<br>
				<span>姓名：hiaozun</span>
				<br>
				<br>
				<span>性别：男</span>
				<br>
				<br>
				<span>爱好：宅着不动</span>
				<br>
				<br>
				<span>学历：本科</span>
				<br>
				<br>
				<span>邮箱：969873875@qq.com</span>
			</div>
		</div>
	</div>
</div>

<div class="container-skills">
	<div class="container">
		<div class="page-header" id="skills">
			<h1 style="padding-top: 20px;">My Skills</h1>
        </div>
		<div class="row">
			<div class="col-md-6">
				<h3>Web前端开发</h3>
				<p class="text-justify">1.负责前端开发，包括PC端以及移动端高级；熟悉W3C标准，熟练掌握HTML,CSS,和JavaScript，能够根据设计图快速的进行页面布局，对前端性能优化有着一定的了解，可以有效地解决浏览器兼容问题。</p>
				<br />
				<p class="text-justify">2.实现产品Web端网站页面特效，JS效果；使用Swiper,Element-UI实现分布布局，实现简单动态效果；熟练掌握Vue，React等主流前端框架，对VueX，Redux有着一定的项目经验，并可以熟练的使用框架搭建项目。</p>
				<br />
				<p>3.使用axios与后台数据进交互，快速渲染数据，实现添加，删除，修改，查询等功能；解决多个版本兼容问题，完成页面的优化；对前台交互有一定了解，熟练使用Ajax,Axios,JSONP等前台交互方式。</p>
				<p>4.熟练使用Node.js语法，可以使用mysql进行数据操作，熟练使用NPM,CNPM等包管理器。</p>
			</div>
			<div class="col-md-6">
			</div>
		</div>
	</div>
</div>

<div class="container-gallery">
    <div class="container">
        <div class="page-header" id="gallery">
            <h1 style="padding-top: 20px;">Exhibition of works</h1>
        </div>
        <div class="row" style="display: inline-block;">

				<div class="work" style="float: left; width: 200px;height: 200px;margin-right: 20px;" onclick="alert('敬请期待！')">
					<img src="images/gallery/gallery1.jpg" style="width: 100%;height: 100%;"/>
					<p style="text-align: center;color: #000;"></p>
				</div>


				<div class="work" style="float: left; width: 200px;height: 200px;margin-right: 20px;" onclick="alert('敬请期待！')">
					<img src="images/gallery/gallery2.jpg" style="width: 100%;height: 100%;"/>
					<p style="text-align: center;color: #000;"></p>
				</div>


				<div class="work" style="float: left; width: 200px;height: 200px;margin-right: 20px;" onclick="alert('敬请期待！')">
					<img src="images/gallery/gallery3.jpg" style="width: 100%;height: 100%;"/>
					<p style="text-align: center;color: #000;"></p>
				</div>


				<div class="work" style="float: left; width: 200px;height: 200px;" onclick="alert('敬请期待！')">
					<img src="images/gallery/gallery4.jpg" style="width: 100%;height: 100%;"/>
					<p style="text-align: center;color: #000;"></p>
				</div>

		</div>
        
    </div>
</div>

<div class="container-contact">
    <div class="container">
		<div class="page-header" id="contact">
            <h1 style="padding-top: 20px;">Contact</h1>
        </div>
        <div class="row">
			<div class="col-md-6">
				<div class="row">
					<div class="col-md-3 text-center">
						<i class="fa fa-map-marker fa-4x" aria-hidden="true" style="color: #1E1F23;"></i>
					</div>
					<div class="col-md-9 text-left">
						<br />
						<p>广东</p>
					</div>
				</div>
				<div class="row">
					<div class="col-md-3 text-center">
						<i class="fa fa-mobile fa-4x" aria-hidden="true" style="color: #1E1F23;"></i>
					</div>
					<div class="col-md-9 text-left">
						<br />
						<p>+1345678910</p>
					</div>
				</div>
				<div class="row">
					<div class="col-md-3 text-center">
						<i class="fa fa-envelope-o fa-3x" aria-hidden="true" style="color: #1E1F23;"></i>
					</div>
					<div class="col-md-9 text-left">
						<br />
						<p>969873875@qq.com</p>
					</div>
				</div>
			</div>
			<div class="col-md-6">
                <form>
                    <div class="form-group">
                        <label for="form-name">姓名</label>
                        <input type="text" class="form-control" id="form-name" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <label for="form-subject">电话</label>
                        <input type="text" class="form-control" id="form-subject" placeholder="Subject">
                    </div>
                    <div class="form-group">
                        <label for="form-email">电子邮件地址</label>
                        <input type="text" class="form-control" id="form-email" placeholder="Email Address">
                    </div>
                    
                    <div class="form-group">
                        <label for="form-message">信息</label>
                        <textarea class="form-control" id="form-message" placeholder="Message"></textarea>
                    </div>
                    <button type="submit" id="submit" class="btn btn-default">发送消息</button>
                    <br /><br />
                </form>
            </div>
        </div>
    </div>
    <div class="clearfix hidden-xs" style="width:100%; height:30px;"></div>
</div>
<footer id="footer" class="clearfix">
    <div class="container">
		<div class="row"><a href="https://beian.miit.gov.cn">粤ICP备2021069214号-1</a></div>
    </div>
</footer>

<script src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<link href="css/magnific-popup.css" rel="stylesheet">
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/theme.js"></script>
<script>
	$('#submit').click(function(){
		var name = $('#form-name').val()
		var tel = $('#form-subject').val()
		var email = $('#form-email').val()
		var msg = $('#form-message').val()
		//alert(name+tel+email+msg)
		$.ajax({
			type:"POST",
			url:"post/msg.php",
			cache: false,
			async:false,  //重要 上次请求更新完才执行下一步
			data: {'name':name,'tel':tel,'email':email,'msg':msg},
			dataType:'json',
			success:function(json){

				alert('提交成功！')

			}
		});

	})
</script>
</body>
</html>
